<template>
  <div style="margin-top:-18px;">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper" style="background:white;">
        <a-form layout="inline" class="formModel" style="margin:20px 0 0 20px">
          <a-row :gutter="48">

            <a-col :md="4" :sm="24">
              <a-form-item label="区县">
                 <CountySelect :form.sync="queryParam" @update="validateField"></CountySelect>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="时间">
                <a-range-picker :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }" v-model="selectTime" @change="onChange" class="rangePicker" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="站点名称">
                <a-input v-model="queryParam.pointName" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-button type="primary" @click="selectEvent">查询</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-table style="margin: 0 20px 20px 20px" :columns="columnstable" :data-source="data" :loading="tableLoading" @change="pageShow" :pagination="pagination" bordered size="middle">
        <template slot="action1" slot-scope="text, record">
          <a-upload :showUploadList="false" :beforeUpload="fujianbeforeUpload">
            <a style="color:black" @click="sendId(record.id)">
              <a-icon type="upload" />上传附件
            </a>
          </a-upload>
          <a-divider type="vertical" v-if='record.annex' />
          <a v-if='record.annex' :href="record.annex">下载附件</a>
        </template>
        <template slot="action2" slot-scope="text,record">
          <a @click="modifyTimeEvent(record)">
            更新时间
          </a>
        </template>
        <template slot="checkTime" slot-scope="text, record">
          <span>{{dataFunction(text)}}</span>
        </template>
        <template slot="overTime" slot-scope="text, record">
          <span v-if="text">{{dataFunction(text)}}</span>
        </template>
      </a-table>
      <!-- -------//进度条----- -->
      <OSSVUE v-if="visiblejindu" v-bind:file="fileData" @uploadSuccessEvent="uploadSuccessEvent"></OSSVUE>
      <!-- 计划添加 -->
      <InspectionPlan @successEvent="successEvent" v-if="addShow" @cancelEvent="cancelEvent"></InspectionPlan>
      <!-- 更新时间 -->
      <a-modal v-model="planShow" :footer="null" :width="700" @cancel="cancelPlanEvent" class="orderModal">
        <div class="infoModal">巡检计划添加</div>
        <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :rules="rules" :wrapper-col="wrapperCol">
          <a-form-model-item label="计划巡检时间" ref="checkTime" prop="checkTime">
            <a-date-picker v-model="form.checkTime" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm" style="width:100%;" />
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 20, offset: 10}">
            <a-button type="primary" @click="onSubmit">
              提交
            </a-button>
            <a-button style="margin-left: 10px;" @click="cancelPlanEvent">
              取消
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import InspectionPlan from '@/views/videoManage/InspectionManagement/inspectionReport/inspectionPlan'
import { getNowTime, getNowFormatDate } from '@/utils/util.js'
import { getInspectionPagesTotal, uploadingAnnex, modifyTime } from '@/api/video'
import { getBase64, UploadToOss } from '@/utils/oss'
import OSSVUE from '@/views/videoManage/oss'
import CountySelect from '@/views/videoManage/util/countySelect'
const data = []
export default {
  components: { InspectionPlan, OSSVUE,CountySelect },
  data() {
    return {
      fileName: '',
      fileData: '',
      visiblejindu: false,
      planShow: false,
      columnstable,
      data,
      searchData: [],
      // create model
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      addShow: false,
      linshiId: 0,
      // 加载数据方法 必须为 Promise 对象

      selectedRowKeys: [],
      selectedRows: [],
      current: 1,
      pageSize: 10,
      selectTime: '',
      tableLoading: false,
      pagination: {
        total: 0,
        showTotal: (total) => `共有 ${total} 条数据`,
      },
      dateFormat: 'YYYY-MM-DD hh:mm:ss',
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      form: {},
      rules: {
        checkTime: [{ required: true, message: '请选择时间', trigger: 'change' }],
      },
    }
  },
  filters: {},
  created() {
    let nowtime = getNowFormatDate()
    this.selectTime = [moment(nowtime), moment(nowtime)]
    this.queryParam.startTime = nowtime + ' 00:00:00'
    this.queryParam.endTime = nowtime + ' 23:59:59'
    this.queryParam.current = this.current
    this.queryParam.pageSize = this.pageSize
  },
  computed: {},
  mounted() {
    this.getDataInfoFunction()
  },
  methods: {
   //手动再验证
    validateField(e) {
      this.queryParam.country = e
    }, 
    //上传附件
    fujianbeforeUpload(file) {
      if (file != undefined) {
        this.visiblejindu = true
        this.fileData = file
        return false
      }
    },
    // 附件上传成功
    uploadSuccessEvent(data) {
      let name = data.name
      let annex = `http://gangmao.oss-cn-shenzhen.aliyuncs.com/${name}`
      this.visiblejindu = false
      this.uploadingFunction(annex, this.linshiId)
    },
    moment,
    successEvent() {
      this.getDataInfoFunction()
      this.addShow = false
    },
    onChange(date, dateString) {
      this.queryParam.startTime = dateString[0] + ' 00:00:00'
      this.queryParam.endTime = dateString[1] + ' 23:59:59'
      this.selectTime = [moment(dateString[0]), moment(dateString[1])]
    },
    //查询
    selectEvent() {
      this.queryParam.current = 1
      this.getDataInfoFunction()
   
    },
    //获取表格数据
    getDataInfoFunction() {
      this.tableLoading = true
      getInspectionPagesTotal(this.queryParam)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.data = response.data.records
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    //分页
    pageShow(pagination) {
      this.tableLoading = true
      this.queryParam.current = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      getInspectionPagesTotal(this.queryParam)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.data = response.data.records
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    dataFunction(dataTime) {
      var date = new Date(dataTime)
      var year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes
    },
    //更新时间
    modifyTimeEvent(e) {
      console.log(e)
      if (e.annex == null) {
        let type = 'error'
        this.$notification[type]({
          message: '温馨提示',
          description: '请上传附件!',
          duration: 3,
        })
        return
      }
      this.linshiId = e.id
      this.planShow = true
    },
    cancelPlanEvent() {
      this.planShow = false
    },
    renderTime(date) {
      var dateee = new Date(date).toJSON()
      return new Date(+new Date(dateee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
    },
    /**
     * 上传附件api
     */
    uploadingFunction(url, id) {
      uploadingAnnex(url, id).then((response) => {
        if (response != undefined) {
          if (response.code == 200) {
            let type = 'success'
            this.$notification[type]({
              message: '温馨提示',
              description: '附件上传成功!',
              duration: 3,
            })
            this.getDataInfoFunction()
          }
        }
      })
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // let form =JSON.parse(JSON.stringify(this.form))
          let checkTime = this.renderTime(this.form.checkTime)
          modifyTime(checkTime, this.linshiId).then((response) => {
            if (response != undefined) {
              if (response.code == 200) {
                let type = 'success'
                this.$notification[type]({
                  message: '温馨提示',
                  description: '更新成功!',
                  duration: 3,
                })
                this.planShow = false
                this.getDataInfoFunction()
              }
            }
          })
        } else {
          return false
        }
      })
    },
    //上传附件
    sendId(id) {
      this.linshiId = id
    },
    addEvent() {
      this.addShow = true
    },
    cancelEvent() {
      this.addShow = false
    },
  },
}

const columnstable = [
  {
    title: '区县',
    dataIndex: 'country',
    width: 100,
    align: 'center',
  },
  {
    title: '所属项目',
    dataIndex: 'projectName',
    width: 100,
    align: 'center',
  },
  {
    title: '点位名称',
    dataIndex: 'pointName',
    width: 100,
    align: 'center',
  },
  {
    title: '客户地址',
    dataIndex: 'customerArea',
    width: 100,
    align: 'center',
  },
  {
    title: '维护等级',
    dataIndex: 'level',
    width: 100,
    align: 'center',
  },
  {
    title: '巡检计划时间',
    dataIndex: 'checkTime',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'checkTime' },
  },
  {
    title: '巡检完成时间',
    dataIndex: 'overTime',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'overTime' },
  },

  {
    title: '附件',
    dataIndex: 'annex',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'action1' },
  },
  {
    title: '操作',
    dataIndex: 'action2',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'action2' },
  },
]
</script>
